extends ../_layout
block content
   div.jumbotron
      h1= 'Helooooooooo, ' + (user? user.firstname: 'Guest.') + '!'
      if(!user)
         div.btn-group
            a.btn.btn-success(href='/users/signup') Sign me up >>
               span.fa.fa-user
            a.btn.btn-success(href='/users/login') Local Login
               span.fa.fa-user

   //div.container
   //   div.btn-group
   //      a.btn.btn-primary(href='#', id='ajaxget') Do Ajax GET
   //      a.btn.btn-primary(href='#', id='ajaxpost') Do Ajax POST
   //      a.btn.btn-primary(href='#', id='ajaxput') Do Ajax PUT
   //      a.btn.btn-primary(href='#', id='ajaxdelete') Do Ajax DELETE

   div.container
      //h2= 'Want to join clubs?'
      div.row: form.navbar-form.navbar-left(role='search',action='/clubs/list',method='post')
         div.form-group
            input.form-control(type='text', placeholder='Search clubs', name='keyword')
            button.btn.btn-default(type='submit')= 'Search clubs'
      if(user && user.joinedclubs && user.joinedclubs.length > 0)
         div.row
            - each c in user.joinedclubs
               div.col-xs-8.col-sm-6.col-md-4
                  div.thumbnail
                     a(href='/clubs/detail/' + c._id)
                        img(src='/img/eagle.jpg', width='330', height='300', alt='asdfasdf')
                        div.caption.club-thumb-title.grad-v
                           span(style='color: white; text-align:center; font-weight=700'): h3= c.name


   p
   div.well
      div(id='googleMap', style='height:300px;')

   p
   br
   br
   br
   br
   br

   div.container
        button#apiGetUser= 'getUser'




   //script(src='/js/g-map-api.js')
   script.
      $(document).ready(function(){
      
         //initMap('googleMap');
         //dropMarker(new google.maps.LatLng(  38.898556, -77.037852 ));

         // FUCKING AWESOME!!!
         //var clubs = !{JSON.stringify(clubs)}
         //for(var i = 0; i < clubs.length; i++){
            ////drawMarkerWithContent(new google.maps.LatLng( clubs[i].lat, clubs[i].lng), clubs[i].name );
            //drawMarkerWithContent(clubs[i].lat, clubs[i].lng, "<a href='/clubs/detail/" + clubs[i].id + "'>" + clubs[i].name + "</a>");
         //}
         //centerMap(38.898556, -77.037852, 14 );

         
         $('#ajaxget').click(function(){
            $.ajax({
               type        : 'GET',
               url         : '/ajax',
               data        : JSON.stringify({method: 'GET METHOD'}),
               processData : false,
               dataType    : 'json',               // The type of data expected from the server
               contentType : 'application/json',   // When sending data to the server, use this content type
               cache       : false
            }).success(function(data){
               alert('GET: ' + data.value);
            }).error(function(){
               return;
            });
         });

         $('#ajaxpost').click(function(){
            $.ajax({
               type: 'POST',
               url: '/ajax',
               data: JSON.stringify({method: 'POST METHOD'}),
               processData: false,
               dataType: 'json',
               contentType: 'application/json',
               cache: false
            }).success(function(data){
               alert('POST: ' + data.value);
            }).error(function(){
               return;
            });
         });

         $('#ajaxput').click(function(){
            $.ajax({
               type: 'PUT',
               url: '/ajax',
               data: JSON.stringify({method: 'PUT METHOD'}),
               processData: false,
               dataType: 'json',
               contentType: 'application/json',
               cache: false
            }).success(function(data){
               alert('PUT: ' + data.value);
            }).error(function(){
               return;
            });
         });

         $('#ajaxdelete').click(function(){
            $.ajax({
               type: 'DELETE',
               url: '/ajax',
               data: JSON.stringify({method: 'DELETE METHOD'}),
               processData: false,
               dataType: 'json',
               contentType: 'application/json',
               cache: false
            }).success(function(data){
               alert('DELETE: ' + data.value);
            }).error(function(){
               return;
            });
         });


         $('#apiGetUser').click(function(){
            console.log('apiGetUser is being clicked');
            $.ajax({
               type: 'POST',
               url: '/api/getUser',
               data: JSON.stringify({username:   'My User Name!!', age: 12, sex: 'male'}),
               processData: false,
               dataType: 'json',
               contentType: 'application/json',
               cache: false
            }).success(function(data){
               alert('POST: ' + data);
            }).error(function(){
               return;
            });
         });




      });
